// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import './todo.css'

// TodoList组件
class TodoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      todolist1 : ["noe","two","three"],
      todolist2 : ["five","six"],
      inputValue : ''
    }
  }

  // 监听输入框里面的内容
  inputChange = (e) => {
    this.setState({
      inputValue : e.target.value
    })
  }
  // 增加数据
  addItem = () => {
    if(this.state.inputValue === ''){
      alert("请输入内容！");
      return;
    }
    this.setState({
      todolist1 : [...this.state.todolist1,this.state.inputValue],
      inputValue : ''
    })
    localStorage.setItem('todolist1', [...this.state.todolist1,this.state.inputValue]);
  }
  //修改数据
  changeIteam = (index) =>{
    let list = [...this.state.todolist1];
    let todo =[...this.state.todolist2]
    var thg = list[index]
    list.splice(index,1);
    todo.splice(todo.length,0,thg);
    this.setState({
      todolist1 : list
    })
    localStorage.setItem('todolist1',list);
    this.setState({
      todolist2 : todo
    })
    localStorage.setItem('todolist2',todo);
  }
  // 删除数据
  deleteItem = (index) => {
    let todo = [...this.state.todolist2];
    todo.splice(index,1);
    this.setState({
      todolist2 : todo
    })
    localStorage.setItem('todolist2',todo);
  }
  //ToDoList
  render() {
    return (
      <div className='div0'>
        <div className='div1'>
        <input onChange={this.inputChange} value={this.state.inputValue} className='input'/><button onClick={this.addItem} className='btn'>增加</button>
        </div>
        <ul>
          <p className='ido'>我要做</p>
          {
            this.state.todolist1.map((item,index) => {
              return <TodoItem item={item} key={index} index={index} deleteItem={this.changeIteam}/>
            })
          }
          <p className='idid'>已经做</p>
          {
            this.state.todolist2.map((item,index) => {
              return <DidItem item={item} key={index} index={index} deleteItem={this.deleteItem}/>
            })
          }
        </ul>
        
      </div>
    );
  }
}
//要做
class TodoItem extends Component {
  deleteItem = () => {
    this.props.deleteItem(this.props.index);
  }
  render(){
    return(
      <div>
        
      <li className='titem'>
     
        {this.props.item}

        <button onClick={this.deleteItem} className="did">已做</button>
      </li>

      </div>

    )
  }
}
//已经做
class DidItem extends Component {
  deleteItem = () => {
    this.props.deleteItem(this.props.index);
  }
  render(){
    return(
      <div>
        
      <li className='ditem'>
     
        {this.props.item}
    
        <button onClick={this.deleteItem} className="del">删除</button>
      </li>

      </div>

    )
  }
}

ReactDom.render(<TodoList />,document.getElementById("root"));
